	* {
	  margin: 0;
	  padding: 0;
	}

	html,
	body {
	  height: 100%;
	}

	.box {
	  width: 500px;
	  height: 300px;
	  margin: 150px auto;
	  border: 5px solid #DCDFE6;
	  position: relative;
	  overflow: hidden;
	  cursor: pointer;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, .12),
	    0 0 6px rgba(0, 0, 0, .04);
	  border-radius: 10px;
	}

	img {
	  display: inline-block;
	  width: 500px;
	  height: 300px;
	  border-radius: 10px;
	}

	.box .bg {
	  width: 480px;
	  height: 280px;
	  background-color: black;
	  opacity: 0;
	  position: absolute;
	  top: 10px;
	  left: 10px;
	  transition: all 1s linear;
	  border-radius: 10px;
	}

	.box:hover .bg {
	  opacity: 0.5;
	}

	.box h2 {
	  font-weight: bold;
	  font-family: 楷体;
	  color: white;
	  width: 100%;
	  text-align: center;
	  position: absolute;
	  top: -40px;
	  transition: all 1s linear;
	}

	.box:hover h2 {
	  top: 30px;
	}

	.box .circle {
	  width: 80px;
	  height: 80px;
	  border-radius: 50%;
	  background-color: #DCDFE6;
	  position: absolute;
	  top: 100px;
	  left: -100px;
	  transition: all 1s linear;
	}

	.box:hover .circle {
	  left: 200px;
	}

	.box span {
	  font-size: 6em;
	  color: #F56C6C;
	  font-weight: bolder;
	  position: absolute;
	  top: 70px;
	  right: -80px;
	  transition: all 1s linear;
	}

	.box:hover span {
	  right: 225px;
	}